//首页
<template>
  <div>
    <div class="cont">
      <div class="search-box">
        <input type="text" placeholder="案例库：搜项目or医生关键词" />
        <button>
          <van-icon name="search" />
        </button>
        <div class="banner-box">
          <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(item, index) in arr" :key="index">
              <img
                style="width: 100%; heigth: 8.65rem"
                :v-lazy="item.image"
                :src="item.image"
              />
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <div class="nav-list">
        <van-grid square :column-num="5">
          <van-grid-item
            v-for="item in list"
            :key="item.id"
            @click="classificationEvt(item)"
          >
            <van-image
              :src="item.image"
              style="width: 1.95rem; heigth: 1.95rem"
            />
            <div style="font-size: 0.7rem; margin-top: 0.54rem">
              {{ item.name }}
            </div>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="main-box">
        <div class="a-module">
          <div class="a-module-l">
            <img src="../../assets/秒杀.gif" alt="" class="img-size" />
          </div>
          <div class="a-module-r">
            <div class="a-module-r-t">
              <img src="../../assets/红包.png" class="img-size" />
            </div>
            <div class="a-module-r-b">
              <img src="../../assets/签到.png" class="img-size" />
            </div>
          </div>
        </div>
        <div class="ranking between-box">
          <div class="ranking-l">
            <span>机构榜单</span>
            <img src="../../assets/机构榜单.gif" />
          </div>
          <div class="ranking-r">
            <span>医生榜单</span>
            <img src="../../assets/医生榜单.gif" />
          </div>
        </div>
        <ul class="shopping-nav between-box">
          <li
            v-for="it in shopping_list"
            :key="it.value"
            @click="selectMenu(it)"
            :class="{ cls_flag: nowType == it.value }"
          >
            {{ it.name }}
          </li>
        </ul>

        <div>
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            :immediate-check='false'
            @load="onLoad"
          >
            <component :is="nowType" :page="page" @setLoading="setLoading" :ref='nowType' />
          </van-list>
        </div>
      </div>
    </div>
    <div>
      <tebber :active="active"> </tebber>
    </div>
  </div>
</template>

<script>
import tebber from "@/components/tabber";
import proSelected from "@/components/proSelected";
import commodity from "@/components/commodity";
import mechanism from "@/components/mechanism";
import doctor from "@/components/doctor";
import { CellGroup } from "vant";
export default {
  name: "",
  props: {},
  data() {
    return {
      loading: false,
      finished: false,
      page: 0,
      arr: [], //轮播
      list: [], //分类
      active: 0,
      images: [],
      nowType: "proSelected",
      shopping_list: [
        { value: "proSelected", name: "精选" },
        { value: "commodity", name: "商品" },
        { value: "mechanism", name: "机构" },
        { value: "doctor", name: "医生" },
      ],
    };
  },
  components: {
    tebber,
    proSelected,
    commodity,
    mechanism,
    doctor,
  },
  methods: {
    onLoad() {
      //上拉加载事件
      this.page = this.page + 1;
      // console.log(888);
      let nowType = this.nowType
      this.$nextTick(()=>{
      this.$refs[nowType].getGoodsList(true)
      })
    },
    setLoading(e) {
      // console.log(e);
      this.loading = e
      //改变父组件是的值
    },
    selectMenu(item) {
      //切换
      this.page = 0
      this.nowType = item.value;
    },
    //点击分类跳转
    classificationEvt(item) {
      this.$router.push({
        path: "/classification",
        query: {
          id: item.id,
          name: item.name,
        },
      });
    },
    //轮播图获取
    getBanner() {
      this.$api
        .getBanner({
          limit: 999,
          page: 1,
          where: {
            city_id: 6,
            ad_id: 1,
          },
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 200) {
            this.arr = res.data;
            this.productClass();
          }
        });
    },
    // 分类获取
    productClass() {
      this.$api.productClass().then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.list = res.data.slice(0, 10);
        }
      });
    },
  },
  created() {
    this.getBanner();
  },
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
.cont {
  background-color: #fff;
}
//两端对齐
.between-box {
  display: flex;
  justify-content: space-between;
}
//图片大小
.img-size {
  width: 100%;
  height: 100%;
}
$layout-size: 0 0.86rem;
$box-p: 0.65rem;
.search-box {
  width: 100%;
  height: 7.08rem;
  background: linear-gradient(129deg, #2fb6a5 0%, #30ccb5 100%);
  border-radius: 0rem 0rem 1.35rem 1.35rem;
  padding: 0.65rem 0.86rem;
  position: relative;
  input {
    width: 100%;
    height: 1.95rem;
    border: none;
    border-radius: 1.08rem;
    background: #ffffff;
    outline: none;
    font-size: 0.65rem;
    color: #bcbcbc;
    line-height: 0.89rem;
    padding-left: 1.08rem;
  }
  button {
    position: absolute;
    background: #ffffff;
    border: none;
    right: 1.8rem;
    top: 1rem;
    cursor: pointer;
  }
  .banner-box {
    position: relative;
    z-index: 1000;
    width: 100%;
    height: 8.65rem;
    padding: 0.65rem 0.86rem;
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
    }
  }
}
.nav-list {
  padding: $layout-size;
  margin-top: 8rem;
}
.main-box {
  width: 100%;
  background: #f6f6f6;
  .a-module {
    padding: 0 0.86rem;
    height: 12.3rem;
    margin: 2rem 0;
    background-color: #f6f6f6;
    display: flex;
    justify-content: space-between;
    .a-module-l {
      flex: 1;
      border-radius: 0.22rem;
      margin-right: 0.65rem;
      img {
        height: 12.3rem;
      }
    }
    .a-module-r {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .a-module-r-t {
        flex: 1.5;
        margin-bottom: 0.4rem;
        border-radius: 0.22rem;
      }
      .a-module-r-b {
        flex: 1;
        border-radius: 0.22rem;
      }
    }
  }
  .ranking {
    padding: 0 0.86rem;
    margin-bottom: 1rem;
    height: 5.35rem;
    border-radius: 0.16rem;
    span {
      position: absolute;
      height: 1.3rem;
      font-size: 0.65rem;
      font-weight: 700;
      color: #333333;
      top: 0.3rem;
      left: 0.5rem;
      z-index: 10;
    }
    img {
      width: 10rem;
      height: 5rem;
      padding: 1.68rem 0.51rem 0.3rem 0.57rem;
    }
    .ranking-l {
      position: relative;
      flex: 1;
      margin-right: $box-p;
      background-color: #fff;
    }
    .ranking-r {
      position: relative;
      flex: 1;
      background-color: #fff;
    }
  }
  .shopping-nav {
    width: 100%;
    height: 1.22rem;
    padding: $layout-size;
    margin-bottom: 0.8rem;
    li {
      flex: 1;
      position: relative;
      text-align: center;
      font-size: 0.86rem;
      color: #909090;
      &::after {
        content: "";
        display: inline-block;
        right: 0;
        top: 0.35rem;
        position: absolute;
        width: 0.03rem;
        height: 0.54rem;
        background-color: #b4b4b4;
      }
    }
    .cls_flag {
      color: #333333 !important;
    }
    & li:nth-last-of-type(1) {
      &::after {
        content: none;
      }
    }
  }
  .shopping-con {
    width: 100%;
  }
}
</style>